<template>
	<view class="main">
		<!-- #ifdef MP-WEIXIN -->
		<image class="bg" src="@/static/img/image3.png" mode=""></image>
		<!-- #endif -->
		<view class="header">
			<text>红积分余额</text>
			<text>{{info.hasmoney}}</text>
		</view>
		<view class="content">
			<view class="tit">
				输入充值红积分数量
			</view>
			<view class="num">
				<input type="number" v-model="money" placeholder=" " />
				<text>积分</text>
			</view>
			<view class="btn">
				<view class="money">￥<text>{{money || '0.00'}}</text></view>
				<view class="submit" @click="handleSubmit">确认充值</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getOpenId,
		rechargeCreate,
		user
	} from '@/api/index.js'
	export default {
		data() {
			return {
				info: {},
				money: ''
			}
		},
		onLoad() {
			this.getInfo()
		},

		methods: {
			async getInfo() {
				let res = await user()
				this.info = res.data
			},

			async handleSubmit() {
				if (!this.money) {
					uni.showToast({
						title: '金额不能为空',
						icon: 'none'
					})
					return
				}

				let _this = this;
				uni.login({
					provider: 'weixin',
					success: function(loginRes) {
						_this.confirmSubmit(loginRes.code);
					}
				});
			},

			async confirmSubmit(code) {
				let res1 = await getOpenId({
					code: code
				})
				// console.log(res1)
				let openid = res1.data;
				let res2 = await rechargeCreate({
					openid: openid,
					money: this.money
				})
				// console.log(res2)
				if (res2.code == 1) {
					let paymentData = res2.data.data;
					// console.log(paymentData)
					uni.requestPayment({
						timeStamp: paymentData.timeStamp,
						nonceStr: paymentData.nonceStr,
						package: paymentData.package,
						signType: 'MD5',
						paySign: paymentData.paySign,
						success: (res) => {
							uni.showToast({
								title: '支付成功！',
								icon: 'none'
							})
							setTimeout(() => {
								uni.redirectTo({
									url: '/pageC/hjf'
								})
							}, 1000)
						},
						fail: (res) => {
							uni.showToast({
								title: '支付失败！',
								icon: 'none'
							})
						}
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.main {
		position: relative;
		background-image: url(@/static/img/image3.png);
		background-size: 100% 604rpx;
		background-repeat: no-repeat;
		background-position: top left;
		min-height: 100vh;
		background-color: #f6f6f6;
		display: flex;
		flex-direction: column;

		.bg {
			width: 100%;
			height: 604rpx;
			top: 0;
			left: 0;
			position: absolute;
			// z-index: -1;
		}

		.header {
			position: relative;
			z-index: 10;
			display: flex;
			flex-direction: column;
			padding: 100rpx 50rpx;

			text:first-child {
				color: #DCFFCB;
				font-size: 28rpx;
				margin-bottom: 30rpx;
			}

			text:last-child {
				color: #fff;
				font-size: 60rpx;
			}
		}

		.content {
			position: relative;
			z-index: 10;
			flex: 1;
			padding: 40rpx;
			background-color: #fff;
			border-radius: 30rpx 30rpx 0 0;

			.tit {
				font-size: 26rpx;
				font-weight: 600;
				margin-bottom: 24rpx;
			}

			.num {
				display: flex;
				align-items: center;
				margin-bottom: 40rpx;

				input {
					flex: 1;
					height: 64rpx;
					border-bottom: 1rpx solid #000;
				}

				text {
					font-size: 28rpx;
					margin-left: 12rpx;
				}
			}

			.btn {
				width: 100%;
				height: 96rpx;
				position: relative;
				border-radius: 48rpx;
				box-sizing: border-box;
				background-color: #000;

				.money {
					position: absolute;
					width: 100%;
					height: 100%;
					color: #fff;
					font-size: 28rpx;
					padding: 0 32rpx;
					line-height: 96rpx;
					box-sizing: border-box;

					text {
						font-size: 36rpx;
					}
				}

				.submit {
					position: absolute;
					right: 0;
					top: 0;
					width: fit-content;
					padding: 0 80rpx;
					height: 100%;
					line-height: 96rpx;
					font-size: 28rpx;
					color: #fff;
					border-radius: 48rpx;
					background-color: #EA504F;
				}
			}
		}
	}
</style>